<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-08-13 10:47:35
 * @LastEditors: charles
 * @LastEditTime: 2021-08-13 11:35:18
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易严选 新品首发</title>
  <style>
    html { font: 12px '微软雅黑'; }
    body {margin: 0;}
    ul {margin: 0;padding: 0;list-style: none;}
    .wrapper {
      width: 1090px;
      margin: 0 auto;
    }
    .xpsf {
    }
    .xpsf ul.p_list::after {
      content: "";
      display: block;
      clear: both;
    }
    .xpsf ul.p_list > li {
      height: 361px;
      float: left;
      width: 265px;
      margin-right: 10px;
      cursor: pointer;
    }
    .xpsf ul.p_list > li:last-child {
      margin-right: 0;
    }
    .xpsf ul.p_list > li:hover {
      background-color: #f4f4f4;
    }
    .xpsf ul.p_list > li:hover .photo_list{
      margin-left: -265px;
    }
    .xpsf ul.p_list > li > .photo {
      height: 265px;
     
      overflow: hidden;
    }
    .xpsf ul.p_list > li > .photo > .photo_list {
      width: 265px;
      height: 265px;
      display: flex;
    }
    .xpsf ul.p_list > li > .photo > .photo_list img {
      display: block;
      width: 265px;
    }
    .xpsf ul.p_list > li >.text {
      margin: 20px;
      text-align: center;
    }
    .xpsf ul.p_list > li >.text >span{
      padding-top: 20px;
      margin: 40px;
      text-align: center;
      color:#000;
      font-size: 14px;
     
    }
    .xpsf ul.p_list > li >.text >.price{
      color:#D4282D;
      margin-top: 10px;
    }

    .rqtj {
     /* background-color:lightsalmon;*/
      height: 300px;
    }
    .jjsh {
      height: 300px;
      background-color: lightseagreen;
    }
    .photo>.title>.name{

    color: #D4282D;
    font-size: 13px;
    margin: 0;
    }
    .wrapper>.name {
    margin: 0px 20px 0px 0px;
    /* padding-top: 0px; */
    font-size: 28px;
    display: inline-block;
  }
  .title>.name:hover {
    color: #b1a07d;
    cursor: pointer;
  }
  .headerLeft {
    display: inline-block;
    margin: 10px 20px 10px 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  
  </style>
</head>
<body>
  <!-- 容器 -->
  <div class="container">
    <!-- 新品首发 -->
    <div class="xpsf">
      <!-- 居中 -->
      <div class="wrapper">
        <h3 class="name">新品首发</h3>
        <div class="headerLeft">为你寻觅世间好物</div>
        <ul class="p_list">
          <li>
            <div class="photo">
              <div class="photo_list">
                <img src="https://yanxuan-item.nosdn.127.net/570c17ec4e8088fee50959f81173857c.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
                <img src="https://yanxuan-item.nosdn.127.net/976660d7251d8a707a1b0152d30c3b14.jpg?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
                 
               
               
              </div>
              
            </div>
            <div class="text">
              <span>可以吃的“冻干酥脆咖啡” 咖啡饼干 340g</span>
              <div class="price">
                ￥13.9
              </div>
            </div>
            
          </li>
          <li>
            <div class="photo">
              <div class="photo_list">
                <img src="https://yanxuan-item.nosdn.127.net/5ad31954596a4c97de4272fdf93efebe.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
                <img src="https://yanxuan-item.nosdn.127.net/6eb36ae99447d935543fd5d558169520.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
                
              </div>
            </div>
            <div class="text">
              <span>蜂蜜般流心，大颗土耳其杏肉</span>
              <div class="price">
                ￥16.9
              </div>
            </div>
          </li>
          <li>
            <div class="photo">
              <div class="photo_list">
                <img src="https://yanxuan-item.nosdn.127.net/7c350185a9a0d330d6e5e60055a8e64c.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
                <img src="https://yanxuan-item.nosdn.127.net/21c4c1e7a93407238b66927e4a5fb24a.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
              </div>
            </div>
            <div class="text">
              <span>日本制造，隅田川意式手冲特浓挂耳咖啡</span>
              <div class="price">
                ￥39.9
              </div>
            </div>
          </li>
          <li>
            <div class="photo">
              <div class="photo_list">
                <img src="https://yanxuan-item.nosdn.127.net/9c5db0ed53c296ed3c636bfbafa45652.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
                <img src="https://yanxuan-item.nosdn.127.net/1f268537a74bd3495f360379ff2c9de8.png?type=webp&quality=95&thumbnail=265x265&imageView" alt="">
              </div>
            </div>
              <div class="text">
                <span>窈窕身姿 芊芊如燕膏 120克（10克*12袋）</span>
                <div class="price">
                  ￥105
                </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="rqtj">
      <div class="wrapper">
        人气推荐
      </div>
    </div>
    <!-- 居家生活 -->
    <div class="jjsh">
      <div class="wrapper">
        居家生活
      </div>
    </div>
  </div>
</body>
</html>